<div class="app-modal valign-wrapper">
    <div class="container height100">
        <div class="row height100">
            <div class="col-md-6 col-md-offset-4 height100 valign-wrapper">
                <div class="modal-content" ng-show="!passmode && !checkSecondPass">
                    <div class="modal-header">
                        <vote-title adding="adding" fee="fee"></vote-title>
                    <div class="close-modal" ng-click="close()">
                        <span class="sr-only"><translate>Close modal</translate></span>
                    </div>
                </div>
                <div class="modal-nav">
                    <ul class="nav nav-vote">
                        <li>
                            <a href="#" ng-class="{'green-link': adding,  'red-link': !adding}" ng-click="passcheck()"><i class="mdi-action-favorite-outline left"></i> <vote-action adding="adding"></vote-action></a>
                        </li>
                        <li>
                            <a href="#" ng-click="close()"><i class="mdi-navigation-close left"></i><translate>CANCEL</translate></a>
                        </li>
                    </ul>
                </div>
                <div class="scrolling">
                    <div class="modal-body voting-error" ng-if="fromServer">
                        <span class="pass-error">{{fromServer}}</span>
                    </div>
                    <div class="modal-body">
                        <ul class="list-group">
                            <li class="list-group-item vote-list" ng-repeat="(key, item) in voteList" ng-click="removeVote(key)">{{item}}
                                <i class="mdi-navigation-cancel right"></i>
                            </li>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="modal-content" ng-show="passmode && !checkSecondPass">
            <div class="modal-header modal-iconed">
                <div class="close-modal" ng-click="passcheck()">
                    <span class="sr-only"><translate>Close modal</translate></span>
                </div>
            </div>
            <div class="modal-header clearfix">
                <div>
                    <h2>{{'Account Verification'|translate}}</h2>
                </div>
                <div><translate>Please enter your passphrase below.</translate></div>
            </div>
            <div class="modal-body">
                <form ng-submit="vote(secretPhrase)">
                    <div class="field-padding">
                        <div class="input-field">
                            <input ng-focus="focus=='secretPhrase'" id="passPhrase" type="password" ng-model="secretPhrase" ng-trim="false" autofocus ng-class="{'invalid': fromServer}">
                            <label for="passPhrase"><translate>Your Passphrase</translate></label>
                        </div>
                        <span class="pass-error" ng-show="fromServer">{{fromServer}}</span>
                    </div>
                    <input type="submit" ng-show="false">
                </form>
            </div>
            <div class="modal-body">
                <ul class="nav modal-buttons pull-right">
                    <li>
                        <a href="#" ng-click="passcheck()"><translate>Cancel</translate></a>
                    </li>
                    <li>
                        <a href="#" class="green-link" ng-click="vote(secretPhrase)"><vote-action adding="adding"></vote-action></a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="modal-content" ng-show="checkSecondPass">
            <div class="modal-header modal-iconed">
                <div class="close-modal" ng-click="close()">
                    <span class="sr-only"><translate>Close modal</span>
                </div>
            </div>
            <div class="modal-header clearfix">
                <div>
                    <h2>{{'Account Verification'|translate}}</h2>
                </div>
                <div><translate>Please enter your second passphrase below.</translate></div>
            </div>
            <div class="modal-body">
                <form ng-submit="vote(secretPhrase, true)">
                    <div class="field-padding">
                        <div class="input-field">
                            <input ng-focus="focus=='secondPhrase'" id="secondPhrase" type="password" ng-model="secondPhrase" ng-trim="false" autofocus ng-class="{'invalid': errorMessage}">
                            <label for="secondPhrase"><translate>Your Second Passphrase</translate></label>
                        </div>
                        <span class="pass-error" ng-show="fromServer">{{fromServer}}</span>
                    </div>
                    <input type="submit" ng-show="false">
                </form>
            </div>
            <div class="modal-body">
                <ul class="nav modal-buttons pull-right">
                    <li>
                        <a href="#" ng-click="passcheck(true)"><translate>BACK</translate></a>
                    </li>
                    <li>
                        <a href="#" class="green-link" ng-click="vote(secretPhrase, true)"><vote-action adding="adding"></vote-action></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
